Mole Mash
thumb|163pxMole Mash é um jogo onde uma toupeira aparece nos buracos e o jogador deve toca-la para marcar pontos. Para criar esta aplicação você precisará das imagens a seguir: *Toupeira (mole.png) *Buraco (hole.png) *Grama (grama.jpg) 1º Passo: Criar a interface gráfica do aplicativo Para isso você deverá abrir o Designer em seu browser. Então crie um novo projeto, chamado MoleMash, clicando em New. Arquivo:CriaMole.jpg A tela de Designer é composta pela Pallette, Viewer, Components e Properties. Na Pallette 'ficam localizados os componentes que podem ser adicionados ao aplicativo. Sendo separados em categorias como por exemplo: *'Basic: que contem Botões, Imagens, Labels, BD, entre outros. *'Media:' que contem Videos, Sons, entre outros *'Social: '''que contem opções de Chamadas Telefonicas, Email, entre outros. *'Other stuff:' que contem Web, Bluetooth, Scaner para Código de Barras, entre outros. A '''Viewer' é uma área para a visualização da tela do seu aplicativo. Nela você arrasta e solta os componentes que usará. Em''' Components ficam organizados todos os componentes utilizados na composição do aplicativo, incluindo'''Medias e Componentes Não-Visiveis como BD e Sensor de localização. E em Media '''ficam as mídias inseridas como imagens e sons. Em '''Properties é onde será possível modificar as propriedades dos componentes. Arquivo:P2Mole.jpg Para esse aplicativo primeiramente será utilizado o componente Canvas '''contido em '''Basic, que é uma área onde a toupeira poderá se mover. Para utiliza-lo arraste-o para dentro da área Screen1 que fica no Viewer '''e em '''Properties modifique-o para que fique com 300 pixels de altura e largura Fill Parent. Para definir o fundo da tela é necessario primeiramente carregar a imagem grama.jpg no projeto, clicando em Add '''que fica contido em '''Media e selecionando-a. Então em Properties '''no campo BackgroundImage selecionar a imagem '''grama.jpg. Arquivo:P3Mole.jpg Em seguida você deve adicionar ao Viewer seis componentes ImageSprite contido em''' Animation', que são imagens que podem se mover dentro de uma área' Canvas.' Uma dessas '''ImageSprite' será a toupeira e os demais serão os buracos por onde a toupeira sairá. Na área Components renomeie as ImageSprites '''para ser mais fácil utiliza-las na hora de desenvolver a lógica. Você pode chamar uma de '''Toupeira '''e as de mais de '''Buraco1, Buraco2,...,Buraco5. Tambem deverá definir imagens para cada um dos ImageSprites.' '''Para isso adicione as imagens '''mole.png' e hole.png ao projeto, assim como fez com a imagem da grama e em Properties no campo Picture selecione a imagem mole.png para o''' ImageSprite Toupeira''' e''' hole.png''' para os ImageSprites Buraco1,' Buraco2',..., Buraco6. A imagem da toupeira se move pela tela, enquanto as imagens dos buracos permanecem estáticas. Por isso é necessario definir sua posição assim como a seguir: Buraco1: X=20; Y'''=60; '''Buraco2: X=130; Y'''=60; '''Buraco3: X=240; Y'''=60; '''Buraco4: X=75; Y'''=140; '''Buraco5: X=185; Y'=140; Não é necessario definir a posição da toupeira,pois ela fica se movendo pela tela. Entretanto a imagem dela aparece na frente do buraco. Para que isso acontece é preciso definir '''Z='2.0, ao invés do padrão 1.0. Definidas as posições a tela deverá ficar assim: Arquivo:P4Mole.jpg Para ser possível jogar é necessario um placar. Assim adicione um '''HorizontalArrangement que permite que dois componentes sejam inseridos lado a lado na horizontal. Então adicione nele um Label que esta contido em''' Basic. Renomeio para '''PontuacaoText '''e modifique as propriedades '''Text para "Pontuação:" e FontSize para 20. Ao lado da PontuacaoText adicione outro Label '''e renomeio para '''Pontuacao '''e modifique a propriedade '''Text '''para "0". Para ser possível a toupeira se movimentar de tempos em tempos é necessário um temporizador, para isso insira o componente '''Clock ao Viewer. Ele ficará na área de Componentes Não-Visiveis. Em Properties defina o TimerInterval como "500" milisegundos como na figura abaixo. Arquivo:P5Mole.jpg Quando a Toupeira é tocada o aparelho deverá vibrar. Assim será necessário adicionar um Sound ao projeto, arrastando-o para o Viewer. Assim você terá terminado de criar a interface gráfica do aplicativo. 2º Passo: Desenvolver a Lógica do Aplicativo Clique no botão Open the Blocks Editor que fica no canto direito da tela. O download de um arquivo .jnpl 'iniciará. Ao terminar o download clique sobre o arquivo e espere abrir. Arquivo:P6Mole.jpg O Editor de Blocos contem 3 abas: *'Bult-In onde ficam dispostos blocos de Operadores Lógicos como Or, And, True, blocos de Controle como''' if e''' for, entre outros. *'My Blocks' onde ficam dispostos os componentes que foram adicionados no aplicativo como neste caso do MoleMash a Toupeira '''e os '''Buraco's. Arquivo:MyBlocks.jpg *'Advanced' onde ficam mais opções de blocos para os componentes utilizados no projeto. Primeiramente iremos criar uma lista de buracos que servirá para que a Toupeira escolha aleatoriamente um para aparecer. Assim criaremos uma variavel buracos que fica em Definition -> def variable as. Chamaremos então um bloco criar lista em Lists -> call make a list item '''e o encaixaremos na variavel buracos'. Arquivo:ListaBuracos.jpg Também é necessário criar uma variavel auxiliar que irá definir em qual buraco a '''Toupeira' está. Crie uma variavel buracoAtual e defina um valor para ela indo em Math -> Number 123 '''e encaixando-o na variavel buracoAtual e defina um valor inicial "'''0". Arquivo:VarburacoAtual.jpg Ao iniciar o aplicativo a lista de buracos deverá ser preenchida pelos componentes Buraco1...Buraco5 para só então a Toupeira escolher em qual irá aparecer. Assim definiremos que quando o Screen1 '''for inicializado, os componentes '''Buraco1...Buraco5 serão carregados na lista e depois um bloco que define como a Toupeira irá se mover será chamado. Para isso vá na aba My Blocks '''e em Screen1 arraste o bloco '''Screen1.Initialize. Então em Lists escolha o bloco''' add itens to list,' para adicionar itens nele' defina a lista em que os componentes deverão ser adicionados indo na aba '''My Blocks '''em '''My Definitions, '''onde você irá encontrar as variaveis globais do projeto, inclusive a sua lista '''buracos. A lista de buracos deverá ser encaixada em list no add itens to list. Para adicionar os componentes vá na aba My Blocks e em cada componente BuracoX '''escolha o bloco '''component BuracoX, '''como na figura a seguir. Arquivo:ComponentBur.jpg Encaixe-os em '''item no add itens to list, 'deverá ficar assim. Arquivo:AddItenstoList.jpg Agora é possivel criar um bloco para definir o comportamento da '''Toupeira. '''Para isso vá em '''Definition '''e arraste o bloco '''Procedure, '''então renomeio para '''MoveToupeira. ' Para a Toupeira se movimentar usaremos a variavel '''buracoAtual '''modificando seu valor de tempos em tempos. Assim encaixe no bloco '''MoveToupeira o bloco set global buracoAtual to '''contido em '''My Definitions, que irá modificar o valor da variavel. Para definir qual será o novo valor encaixe ao bloco set global buracoAtual to '''o bloco '''pick random item, que escolhe de forma aleatória um dos itens de uma lista. Aqui no caso defina a lista buracos '''encaixando nele a variavel, como na figura a seguir. Arquivo:SetBurAtual.jpg Para a '''Toupeira ir para o local indicado é necessario chamar o bloco Toupeira.MoveTo, '''contido em '''My Definitions -> Toupeira '''e definir os valores de '''X e Y'''. Para definir o valor de '''X vá na aba Advanced '''e em '''Any ImageSprite escolha a opção ImageSprit.X component, '''que pegará o valor de X definido no componente selecionado (nesse caso o valor do componente definido na variavel buracoAtual')' e encaixe-o em '''X. '''Então encaixe a variavel '''buracoAtual. Faça a mesma coisa para o''' Y.' 'Arquivo:MoveToupeira.jpg' Este bloco será invocado a primeira vez no '''Screen1.Initialize '''dos componentes serem adicionados na lista, então vá em '''My Definitions '''arraste o' moveToupeira e encaixe-o abaixo do '''add items to list. Depois o bloco tambem deverá ser invocado a cada "500" milesegundos contabilizados pelo contador. Para que isso aconteça insira um Clock1.Timer indo em Clock1 '''na aba '''My Blocks. Então arraste e encaixe o moveToupeira para chama-lo. Arquivo:Timer.jpg Assim sua Toupeira já estará com os movimentos definidos e você já poderá fazer o primeiro teste. Para isso clique em New Emulador. Arquivo:NewEmulador.jpg Espere até que o emulador seja totalmente iniciado, aparecerá a seguinte tela. Arquivo:EmuladorTrava.jpg Para destravar arraste o cadeado até a set a direita. O desktop do Android irá aparecer. Vá no Editor de Blocos em Connect to Device e selecione o emulador, para que então o editor seja conectado ao emulador. Arquivo:ConectandoEmulador.jpg Aguarde conectar. A tela do aplicativo aparecerá. A Toupeira estará se movendo, entretanto não acontecerá nada se você clicar em cima dela, pois esse comportamento ainda não foi definido. Arquivo:Tela.jpg Para ser possivel somar pontos quando a Toupeira for clicada você deverá voltar ao''' Editor de Blocos e na aba My Blocks em Toupeira selecionar o Toupeira.Touched, que define qual será o comportamento quando a Toupeira for tocada. Iremos então criar uma variavel para contar os pontos e depois atribuiremos o seu valor para o '''Label2, para que então ele apareça na tela. Defina uma variavel Pontuacao 'com o valor '"0". Arquivo:Pontuacao.jpg Então em My Definitions arraste o bloco set global Pontuacao to '''que irá substituir o valor da variavel '''Pontuacao '''e encaixe-o no Toupeira.Touched. Para definir o valor que irá substituir, encaixe no '''set global Pontuacao to '''um bloco "+" encontrado em Math. Então encaixe no bloco "+" a variavel '''Pontuacao '''e um bloco Number e defina seu valor em '''"1". '''Isso fara com que quando você tocar a '''Toupeira '''ela pegue o valor da '''Pontuacao e some 1. Arquivo:SetPontuacao.jpg Agora é necessário substuir o valor do Label2 pelo valor da Pontuacao. Para isso''' encaixe o '''set Label2.Text to, '''no Toupeira.Touched abaixo do bloco '''set global Pontuacao to. '''Então encaixe nele a variavel '''Pontuacao. Ao clicar na Toupeira alem de acrescentar um ponto o celular deverá vibrar e a Toupeira deverá aparecer em um novo local. Para o celular vibrar encaixe o call Sound1.Vibrate ao Toupeira.Touched e defina o millisecs em "100" utilizando um Number. Isso fará com que seu celular vibre por 100 milesegundos. Arquivo:SoundVibrate.jpg Para a Toupeira aparecer em outro lugar basta você chamar o bloco MoveToupeira e ele você tera terminado a sua aplicação. Ela deverá ter ficado assim. Arquivo:MoleMashP.jpg Arquivo:MoleMashTest.jpg Agora você pode testar e então melhora-la criando regras para jogo, como qual a condição para que o jogador perca e ganhe o jogo. Categoria:Tutorial Categoria:Jogo